<template>
        <div>
            <h4>transition-group</h4>
            <hr>
            <h5>基础用法：</h5>
            <button @click="addNum">add</button>
            <button @click="pop">pop</button>
            <div>
                <transition-group
                leave-active-class="animate__animated animate__bounceOutDown"
                enter-active-class="animate__animated animate__fadeInDown"
                tag="section"
                >
                    <p class="span-p" v-for="(item, index) in numArr" :key="index" @click="clickNumItem(item)">{{item}}</p>
                </transition-group>
            </div>

            <hr>
            <h5>列表的移动过渡</h5>
            <button @click="change">change</button>
            <transition-group name="flip-list" tag="ul">
                <li v-for="item in list" :key="item">
                {{ item }}
                </li>
            </transition-group>

            <hr>
            <h5>状态过渡</h5>
            <input type="number" step="10" v-model="currentNum.current">
            <p>{{currentNum.num.toFixed(0)}}</p>
        </div>
</template>
    
<script setup lang='ts'>
import { reactive } from "@vue/reactivity";
import 'animate.css';
import { ref, watch } from "vue";
import _ from 'lodash';
import gsap from 'gsap'
    // 显示过度
    let numArr = reactive<number[]>([1, 2 ,3 ,4 ,5, 6, 7]);
    let clickNumItem = function(item: number) {
        let index = numArr.findIndex(i => {
            return i === item;
        });
        console.log('index:', index, numArr[index]);
        numArr.splice(index, 1);
    }
    let addNum = () => {
        numArr.push(numArr.length);
    };
    let pop = () => {
        numArr.pop();
    };



    //  移动过度
    // let Arr = Array.apply(null, {length: 81} as number[]).map((item, index) => {
    //     return {
    //         id: index,
    //         number: (index % 9) + 1
    //     };
    // });

    // let Arr = Array(...Array(81));

    // let Arr = Array(81).fill('');

    let list =  ref([1, 2, 3, 4, 5, 6, 7, 8, 9]);

    let change = () => {
        list.value = _.shuffle(list.value);
    }


    // 状态过渡
    let currentNum = reactive({
        num: 0,
        current: 0
    });
    watch(() => currentNum.current, (value) => {
        gsap.to(currentNum, {
            duration: 1,
            num: value
        })

    });
</script>
    
<style>
    .span-p {
        display: initial;
        margin: 10px;
    }
    .flip-list-move {
        transition: all 1s ease;
    }
</style>